const path = require('path')
const packageInfo = require('./package.json')

const TerserPlugin = require('terser-webpack-plugin')

// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV !== 'development'
console.log(process.env.NODE_ENV)

const resolve = dir => {
  return path.resolve(__dirname, dir)
}

const types = [
  {
    oneof: 'vue-modules',
    query: /module/,
  },
  {
    oneof: 'vue',
    query: /\?vue/,
  },
  {
    oneof: 'normal-modules',
    query: /\.module\.\w+$/,
  },
  {
    oneof: 'normal',
  },
]

function elementCssLoader(rule) {
  rule
    .use('vue-style-loader')
    .loader('vue-style-loader')
    .tap(() => ({
      sourceMap: false,
      shadowMode: false,
    }))
    .end()
    .use('css-loader')
    .loader('css-loader')
    .tap(() => ({
      sourceMap: false,
      importLoaders: 2,
      modules: false,
      localIdentName: '[local]_[hash:base64:5]',
    }))
    .end()
    .end()
}

function esignCssLoader(rule) {
  rule
    .use('vue-style-loader')
    .loader('vue-style-loader')
    .tap(() => ({
      sourceMap: false,
      shadowMode: false,
    }))
    .end()
    .use('css-loader')
    .loader('css-loader')
    .tap(() => ({
      sourceMap: false,
      importLoaders: 2,
      modules: false,
      localIdentName: '[local]_[hash:base64:5]',
    }))
    .end()
    .use('postcss-loader')
    .loader('postcss-loader')
    .tap(() => ({
      sourceMap: false,
    }))
    .end()
    .end()
}

function esignMobileCssLoader(rule) {
  rule
    .use('vue-style-loader')
    .loader('vue-style-loader')
    .tap(() => ({
      sourceMap: false,
      shadowMode: false,
    }))
    .end()
    .use('css-loader')
    .loader('css-loader')
    .tap(() => ({
      sourceMap: false,
      importLoaders: 2,
      modules: false,
      localIdentName: '[local]_[hash:base64:5]',
    }))
    .end()
    .use('postcss-loader')
    .loader('postcss-loader')
    .tap(() => ({
      sourceMap: false,
      config: {
        path: 'config/',
      },
    }))
    .end()
    .end()
}

function driverJsCssLoader(rule) {
  rule
    .use('vue-style-loader')
    .loader('vue-style-loader')
    .tap(() => ({
      sourceMap: false,
      shadowMode: false,
    }))
    .end()
    .use('css-loader')
    .loader('css-loader')
    .tap(() => ({
      sourceMap: false,
      importLoaders: 2,
      modules: false,
      localIdentName: '[local]_[hash:base64:5]',
    }))
    .end()
    .use('postcss-loader')
    .loader('postcss-loader')
    .tap(() => ({
      sourceMap: false,
    }))
    .end()
    .end()
}
module.exports = {
  assetsDir:
    process.env.NODE_ENV !== 'development'
      ? `static/${packageInfo.version}/`
      : '',
  outputDir: 'esign-apply-web',
  css: {
    extract: process.env.NODE_ENV !== 'development',
    modules: true,
    loaderOptions: {
      css: {
        camelCase: 'only',
        localIdentName: '[local]_[hash:base64:5]',
      },
    },
  },
  transpileDependencies: [
    /node_modules\/signature_pad/,
    /node_modules\/@esign-ui\/mobile/,
    /node_modules\/@esign-ui\/helpers/,
  ],
  chainWebpack: config => {
    if (isProduction) {
      config.optimization.minimizer([
        new TerserPlugin({
          parallel: true, // 并行打包
          sourceMap: false,
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              // eslint-disable-next-line camelcase
              drop_debugger: false, // 除了这两句是我加的，基他都是默认配置
              // eslint-disable-next-line camelcase
              drop_console: true,
            },
            mangle: true, // Note `mangle.properties` is `false` by default.
            module: false,
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            // eslint-disable-next-line camelcase
            keep_classnames: undefined,
            // eslint-disable-next-line camelcase
            keep_fnames: false,
            safari10: false,
          },
        }),
      ])
    }
    const cssRule = config.module.rule('css')
    cssRule.exclude.add(resolve('./node_modules')).end()
    const elementCssRule = config.module.rule('element_css')
    elementCssRule
      .test(/\.css$/)
      .include.add(resolve('./node_modules/element-ui'))
      .end()
    types.forEach(({ oneof, query }) =>
      elementCssLoader(
        query
          ? elementCssRule.oneOf(oneof).resourceQuery(query)
          : elementCssRule.oneOf(oneof)
      )
    )

    // 针对esign-ui 去掉css-modules
    const esignUiCssRule = config.module.rule('esign-ui_css')
    esignUiCssRule
      .test(/\.css$/)
      .include.add(resolve('./node_modules/@esign-ui/base'))
      .end()
    types.forEach(({ oneof, query }) =>
      esignCssLoader(
        query
          ? esignUiCssRule.oneOf(oneof).resourceQuery(query)
          : esignUiCssRule.oneOf(oneof)
      )
    )

    const esignUiMobileCssRule = config.module.rule('esign-ui-mobile_css')
    esignUiMobileCssRule
      .test(/\.css$/)
      .include.add(resolve('./node_modules/@esign-ui/mobile'))
      .end()
    types.forEach(({ oneof, query }) =>
      esignMobileCssLoader(
        query
          ? esignUiMobileCssRule.oneOf(oneof).resourceQuery(query)
          : esignUiMobileCssRule.oneOf(oneof)
      )
    )

    const driverJsCssRule = config.module.rule('driverJs_css')
    driverJsCssRule
      .test(/\.css$/)
      .include.add(resolve('./node_modules/driver.js'))
      .end()
    types.forEach(({ oneof, query }) =>
      driverJsCssLoader(
        query
          ? driverJsCssRule.oneOf(oneof).resourceQuery(query)
          : driverJsCssRule.oneOf(oneof)
      )
    )

    // svg rule loader
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录中的svg
    config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

    // 移除 prefetch preload
    // config.plugins.delete('prefetch')
    // config.plugins.delete('preload')
    // 删除tslint检查
    config.plugins.delete('fork-ts-checker')
  },
  configureWebpack: config => {
    // if (isProduction) {
    //   config.plugins.push(
    //     new UglifyJsPlugin({
    //       uglifyOptions: {
    //         compress: {
    //           // eslint-disable-next-line camelcase
    //           drop_debugger: true,
    //           // eslint-disable-next-line camelcase
    //           drop_console: true,
    //         },
    //       },
    //       sourceMap: false,
    //       parallel: true,
    //     })
    //   )
    // }

    return {
      externals: {
        'pdfjs-dist': 'pdfjsLib',
      },
    }
  },
  devServer: {
    port: 8080,
    open: true, // 是否自动启动浏览器
    proxy: {
      '/seal': {
        target: 'http://192.168.22.22:8081/seal',
        changeOrigin: true,
        pathRewrite: {
          '^/seal': '/',
        },
      },
    },
  },
}
